<!--
 * @Date: 2021-06-03 21:35:43
 * @LastEditTime: 2022-01-07 17:08:43
-->
<template>
  <el-dialog :visible.sync="visible" width="40%" :center="true" title="打印条形码" @close="cancel">
    <div v-loading class="preview-dialog">
      <div>
        <el-form :model="formdata" label-width="150px" label-position="right">
          <el-form-item label="类型：">
            <div>
              <el-radio-group v-model="type" @change="changeRadio">
                <el-radio :disabled="productData.length===0?true:false" label="1">商品</el-radio>
                <el-radio :disabled="partsData.length===0?true:false" label="2">配件</el-radio>
              </el-radio-group>

            </div>
          </el-form-item>
          <el-form-item label="商品/配件：">
            <el-select v-model="purchase_product_id" style="min-width:300px" placeholder="请选择(编码+id+数量)" @change="changeProduct">
              <el-option v-for="item in selectData" :key="item.id" :value="item.id" :label="`${item.goods_code}(${item.id})(${item.number})`" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-loading="loading" style="height:350px">
        <div v-if="images&& images.length>0">
          <el-carousel height="300px" :autoplay="false">
            <el-carousel-item v-for="(item, index) in images" :key="index">
              <div class="tac">
                <el-image :src="item" />
              </div>
            </el-carousel-item>
          </el-carousel>
          <div slot="footer" style="text-align:center;margin-bottom:20px;margin-top:10px;">
            <el-button type="primary" @click="savePdf2">预览下载pdf</el-button>
            <el-button type="primary" @click="downLoad">批量下载PNG</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { downloadxlsx } from '@/utils/index'
import {
  downloadUrl
} from '@/utils/index'
export default {
  name: 'PewviewProductCode',
  data() {
    return {
      visible: false,
      loading: false,
      id: '',
      images: [],
      purchase_product_id: '',
      productData: [],
      partsData: [],
      type: '1',
      formdata: {},
      selectData: [],
      pdfData: '',
      pdfs: ''
    }
  },
  methods: {
    savePdf2() {
      if (!this.images.length) {
        return
      }
      if (this.pdfData) {
        downloadUrl(this.pdfData)
      }
    },
    changeProduct(val) {
      this.getCodes(val)
    },
    // 修改显示的值
    changeRadio(val) {
      console.log(val)
      const vm = this
      if (Number(val) === 1) {
        vm.selectData = vm.productData
      } else {
        vm.selectData = vm.partsData
      }
    },
    // 显示
    show(id, productData, partsData) {
      const vm = this
      vm.id = id
      if (productData && productData.length > 0) {
        vm.selectData = productData
        vm.type = '1'
      } else {
        vm.selectData = partsData
        vm.type = '2'
      }
      vm.productData = productData
      vm.partsData = partsData
      console.log(productData, partsData)
      vm.visible = true
      // vm.getCodes()
    },
    cancel() {
      const vm = this
      vm.visible = false
      vm.id = ''
      vm.selectData = []
      vm.productData = []
      vm.partsData = []
      vm.purchase_product_id = ''
      vm.images = []
      vm.pdfs = ''
      vm.pdfData = ''
    },
    // 批量下载
    downLoad() {
      const vm = this
      // vm.pdfs.forEach(ele => {
      //   vm.$http.get(ele, { responseType: 'blob' }).then(res => {
      //     const name = ele.split('/').pop()
      //     downloadStream(res, name)
      //   })
      // })
      downloadxlsx(vm.pdfs)
    },
    // 获取产品码
    getCodes(val) {
      const vm = this
      vm.loading = true
      vm.$http.get(`/purchase-contract/product/barcorde/${vm.id}?purchase_product_id=${val}`).then(res => {
        // downloadUrl(res.data.iamge)
        vm.images = res.data.images
        vm.pdfs = res.data.pdf
        vm.pdfData = res.data.pdfAll
        vm.loading = false
      }).catch(() => {
        vm.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
